@extends('base')
@section('content')
    <ul class="footprint">
        <li><a href="#">{{trans('base.HOME')}}</a></li>
        <li><a href="#">&gt;&gt;</a></li>
        <li><a href="#">{{trans('base.ABOUT US')}}</a></li>
    </ul>
    <div class="contant mttop">
        <div class="fl">
            <h2 class="title yin_font2">{{trans('base.ABOUT US')}}</h2>
            <div class="left_nav">
                <ul class="pic_list">
                    @foreach($model as $key=>$about)
                        <li id="{{'about'.$about->id}}"><a href="javascript:void(0)" class="pic_list_ative">{{$about->name}}</a></li>
                    @endforeach
                </ul>
                <div class="contact_left yin_font1_no">
                    <h2 class="title yin_font2 blu">{{trans('base.CONTACT US')}}</h2>
                    <p class="left_tel_1">0086-571-87755818<br/>0086-571-86625528<br/>0086-571-89710053</p>
                    <p class="left_fax_1">0086-571-87755816</p>
                    <p class="left_Email_1">lihe@lihehz.com</p>
                </div>
            </div>
        </div>
        <div class="contact_right">
        @foreach($model as $key=>$item)
            <div class="about_con {{'about'.($item->id)}}"  id="{{'about'.($key+1)}}">
                <h2 class="ny_tit yin_font"><span>{{$item->name}}</span></h2>
                <article>
                    {!! json_decode($item->content)->content !!}
                </article>
            </div>
        @endforeach
        </div>
    </div>
@stop

@section('js')
    <script type="text/javascript">
        $(function(){
            var parameterId = {{$id}};
            if(parseInt(parameterId)>0){
                $("html,body").animate({scrollTop:($("div.about"+parameterId).offset().top)},800);
            }
            $("li[id^=about]").on("click",function(){
                var id = $(this).attr("id");
                if(id){
                    $("html,body").animate({scrollTop:($("div."+id).offset().top)},800);
                }
            });

            //header的高度
            var headerHeight = $('header').height();
            //content的上边距
            var contentTop = parseInt( $('div.contant').css('margin-top').match(/(-?\d*)\.?\d+/)[0] );


            $(window).scroll(function(){
                //文档滚动条的垂直位置
                var offset = $(document).scrollTop();
                //窗口滚动条的垂直位置
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();
                var contentHeight = $('div.contact_right').height();
//                if(scrollTop + windowHeight == scrollHeight){
//                    return;
//                }

                if(offset >= (headerHeight+contentTop) && offset < (headerHeight+contentTop+contentHeight-300) ){
                    $(".fl").css({"padding-top":(offset-headerHeight-contentTop) + 'px'});
                }

            });
        })
    </script>
@endsection
